<template>
    <div class="ilink" :style="{transform:'translateX('+translate_x+'%)'}">

        <div id="header" ref="header">
            <i class="cubeic-back" @click="$emit('close')"></i>
            推广链接
            <cube-button class="add-btn" :inline="true" icon="cubeic-add" @click="clickAdd">添加</cube-button>
        </div>

        <cube-scroll v-if="list.data.length > 0" id="list" ref="scroll" :style="{height:scroll_height+'px'}" :options="scroll_options" @pulling-up="upLoad">
            <dl v-for="(item,index) in list.data" :key="item.id" @click="clickDl(index)">
                <dt>{{item.name}}</dt>
                <dd>{{item.link}}</dd>
            </dl>
        </cube-scroll>
        <empty v-else @touchstart.prevent>暂无链接</empty>

<!--        &lt;!&ndash;S外部网页组件&ndash;&gt;-->
<!--        <page-->
<!--                :src="page_src"-->
<!--                :toggle="show_page"-->
<!--                @close="show_page = false"-->
<!--                >-->
<!--        </page>-->
<!--        &lt;!&ndash;E外部网页组件&ndash;&gt;-->
    </div>
</template>

<script>
    import empty from "../../components/empty/Empty";
    import store from "../../store/index";
    export default {
        name: "ILink",
        data(){
            return {
                "translate_x":100,   //组件translateX
                scroll_height:0,  //滚动列表高度
                add_dialog:null,  //添加推广链接弹窗
                name:"",  //链接名称
                link:"",  //链接地址
                list:{
                    data:[],
                    limit:[0,20]
                },
                handle_index:0,  //操作的列表下标
                scroll_options:{
                    scrollbar:true,
                    pullUpLoad:{
                        txt:{more:'上拉加载',noMore:'----我也是有底线的----'}
                    }
                },
                loading:false  //是否正在加载中
            }
        },
        props:{
            //显示隐藏
            toggle:{
                type:Boolean,
                default:false
            },
            //是否开启选择项
            select:{
                type:Boolean,
                default: false
            }
        },
        components:{
          empty
        },
        watch:{
            toggle(value){
                if(value){
                    this.translate_x = 0;
                }else{
                    this.translate_x = 100;
                }
            }
        },
        mounted() {
            this.scroll_height = document.documentElement.clientHeight-this.$refs.header.getBoundingClientRect().height;
        },
        computed:{
            data(){
                return {
                    name:this.name,
                    link:this.link
                }
            }
        },
        created() {
            this.getList();
        },
        methods:{
            //Run
            /**
             * 获取列表
             */
            getList(){
                this.loading = true;
                this.$url("link/getList",{
                    limit:this.list.limit
                })
                    .then((res)=>{
                        this.loading = false;
                        if(res.data.status === "success"){
                            this.list.data.push(...res.data.data);
                            this.list.limit[0] += this.list.limit[1];
                            if(this.$refs.scroll) this.$refs.scroll.forceUpdate(true,true);
                        }else{
                            if(this.list.limit[0] === 0){
                                this.scroll_options.pullUpLoad = false;
                            }else{
                                this.$refs.scroll.forceUpdate(false,false);
                            }
                        }
                    });
            },

            //Handle
            /**
             * 点击添加链接
             */
            clickAdd(){
                this.add_dialog = this.$createDialog({
                    type: 'confirm',
                    icon:"cubeic-add",
                    title:'添加链接',
                    confirmBtn:{
                        text: '添加'
                    },
                    onConfirm:()=>{
                        if(this.addCheck()){
                            this.add();
                        }else{
                            this.add_dialog.show();
                        }
                    },
                    content:`
                                <div id="add-link-inputs">
                                    <input type="text" name="name" placeholder="链接名称" autocomplete="off" />
                                    <input type="text" name="link" placeholder="链接地址" autocomplete="off" />
                                </div>
                              `
                });
                this.add_dialog.show();
                this.bindInputEvent();
            },
            /**
             * 绑定事件input事件
             */
            bindInputEvent(){
                let inputs = document.querySelectorAll("#add-link-inputs input");
                let self = this;
                for(let i=0;i<inputs.length;i++){
                    inputs[i].addEventListener("blur",()=>{
                        window.scroll(0,0);
                    });
                    inputs[i].addEventListener("input",function(){
                        if(this.name === "name") self.name = this.value;
                        if(this.name === "link") self.link = this.value;
                    });
                }
            },
            /**
             * 清空input
             */
            clearInputs(){
                let inputs = document.querySelectorAll("#add-link-inputs input");
                if(inputs){
                    for(let i=0;i<inputs.length;i++){
                        inputs[i].value = "";
                    }
                }
            },
            /**
             * 添加推广链接
             */
            add(){
                return new Promise((success)=>{
                    this.$url("link/add",{
                        data:this.data
                    })
                    .then((res)=>{
                        if(res.data.status === "success"){
                            let insert_data = {
                                id:res.data.data,
                                name:this.name,
                                link:this.link
                            }
                            this.list.data.unshift(insert_data);
                            this.clearInputs();
                            success();
                        }else{
                            this.$createToast({
                                time: 1500,
                                txt: '添加失败',
                                type:'error',
                                mask:true
                            }).show();
                        }
                    });
                });
            },
            /**
             * 添加验证
             */
            addCheck(){
                if(this.name === ""){
                    this.$createToast({
                        time: 1500,
                        txt: '链接名称不能为空',
                        type:'error',
                        mask:true
                    }).show();
                    return false;
                }
                if(this.name.length > 8){
                    this.$createToast({
                        time: 1500,
                        txt: '链接名称长度不能大于8位',
                        type:'error',
                        mask:true
                    }).show();
                    return false;
                }
                if(!/http[s]?.*/.test(this.link)){
                    this.$createToast({
                        time: 1500,
                        txt: '请输入正确的链接地址',
                        type:'error',
                        mask:true
                    }).show();
                    return false;
                }
                return true;
            },
            /**
             * 上拉加载
             */
            upLoad(){
                this.getList();
            },
            /**
             * 点击dl
             */
            clickDl(index){
                this.handle_index = index;
                let select = [
                    {
                        content: '查看页面',
                        value:'watch'
                    },
                    {
                        content: '删除',
                        value:'delete'
                    }
                ];
                if(this.select) select.unshift({
                    content: '选择',
                    value:'select'
                });
                this.$createActionSheet({
                    title: '操作',
                    data: select,
                    onSelect:(res,index)=>{
                        let value = select[index].value;
                        if(value === "select"){
                            store.commit("setLinkName",this.list.data[this.handle_index].name);
                            this.$emit("change",this.list.data[this.handle_index].id);
                            this.$emit("close");
                        }else if(value === "watch"){
                            store.commit("setPage",{
                                show:true,
                                src:this.list.data[this.handle_index].link,
                                onClose:()=>{
                                    store.commit("setPage",{show:false})
                                }
                            });
                        }else{
                            this.del();
                        }
                    }
                }).show();
            },
            /**
             * 删除
             */
            del(){
                this.$url("link/delete",{
                    link_id:this.list.data[this.handle_index].id
                })
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.list.data.splice(this.handle_index,1);
                    }else{
                        this.$createToast({
                            time: 1500,
                            txt: '删除失败',
                            type:'error'
                        }).show();
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less" src="./ilink.less"></style>
<style lang="stylus">
    #add-link-inputs input
        width 100%
        height 40px
        margin-bottom 10px
        border 1px solid #f6f6f6
        padding 0 5px
        box-sizing border-box
        -webkit-appearance:none;
</style>
